import React, { ReactElement, useContext, useEffect, useState } from 'react';
import { View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

import { Store } from '../../reducer';
import { TabId } from '../../constant';
import Provider from './reducer';
import Container from './components/Container';
import { getSelfCenter } from './actions';
import styles from './style';

export default (): ReactElement => {
  const [show, setShow] = useState(false);
  const { state } = useContext(Store);
  const { currentTab } = state;

  useEffect((): void => {
    if (currentTab.id === TabId.Mine) {
      if (!currentTab.hasShow) {
        // 初始化操作
        setShow(true);
      }
      getSelfCenter();
    }
  }, [currentTab, currentTab.hasShow, currentTab.id]);

  if (!show) return <View />;

  return (
    <Provider>
      <View style={styles.container}>
        <LinearGradient
          colors={['#FFFFFF', '#FFFDF4']}
          style={styles.content}
          start={{ x: 0.0, y: 1.0 }}
          end={{ x: 0.0, y: 0.0 }}
        />
        <Container />
      </View>
    </Provider>
  );
};
